<template>
    <div class="login_wrap_r">
        <div class="form_wrap_r">
            <h2 style="color: #404040">用户注册</h2>
            <el-form :model="loginData" :rules="rules">
                <el-form-item prop="name">
                    <el-input v-model="loginData.name" type="name" prefix-icon="User" placeholder="昵称" />
                </el-form-item>
                <el-form-item prop="sex">
                    <el-input v-model="loginData.sex" type="sex" prefix-icon="Female" placeholder="性别" />
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input v-model="loginData.phone" prefix-icon="Iphone" placeholder="手机号" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginData.password" type="password" prefix-icon="Lock" placeholder="密码" />
                </el-form-item>
                <el-form-item prop="email">
                    <el-input v-model="loginData.email" type="email" prefix-icon="Promotion" placeholder="邮箱" />
                </el-form-item>

                <el-button type="primary" class="login_btn_r" @click="userRegister">立即注册</el-button>
                <br>
                <el-button type="" class="login_btn_r" @click="resetInfo">重&nbsp;&nbsp;&nbsp;置</el-button>

            </el-form>
        </div>
    </div>
</template>

<script>

import { toRefs, reactive } from '@vue/reactivity'
import { userRegisterApi } from "../utils/clientApi"
import { useRouter } from "vue-router"
import { ElMessage } from 'element-plus'
export default {
    name: 'Register',
    setup() {
        const router = useRouter()
        // 数据域
        const data = reactive({

            loginData: {
                id: 0,
                name: "",
                sex: "",
                email: "",
                phone: "",
                password: ""
            },
            rules: {
                name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
                sex: [{ required: true, message: '请输入性别', trigger: 'blur', pattern: /^['男','女']$/ }],
                phone: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', pattern: /^[1][34578][0-9]{9}$/ }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                email: [{ required: true, message: '请输入邮箱', trigger: 'blur', pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/ }]

            }
        })
        // 方法域begin
        const userRegister = () => {

            userRegisterApi(JSON.stringify(data.loginData)).then(res => {
                if (res.status === 200) {
                    ElMessage.success(res.msg)
                    router.push({
                        path: "/login"
                    })
                } else {
                    ElMessage.error(res.msg)

                }
            })
        }

        const resetInfo = () => {
            data.loginData = {}
        }
        // 方法域end
        return {
            // 返回的方法名
            ...toRefs(data),
            userRegister, resetInfo
        }
    }




}
</script>

<style>
.login_r {
    width: 100%;
    height: 100%;
    background: red;
}

.login_wrap_r {
    width: 100%;
    height: 100vh;
}

.form_wrap_r {
    width: 350px;
    height: 400px;
    position: fixed;
    padding: 0 20px 30px 20px;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffff;

    box-shadow: 3px 5px 5px 3px #c4bfbf;

}

#login-bg {
    /*
    登录页背景图
    */

    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}

.login_btn_r {
    display: block;
    margin: 0 auto;
    width: 100%;

}

h3 {
    text-align: center;
    line-height: 24px;

}
</style>